<template>
  <div class="wscn-http404-container" id="Maincontainer">
     <div> computed 监听的值可以改变吗 </div>

      <div> computed里面能放异步方法吗？
     computed不支持异步，只支持同步，watch支持异步请求，所以可以写在watch中
     </div>

     <el-input v-model="input" placeholder="请输入内容"></el-input>
     <button @click="setObjArr">set</button>
     <div> ---------------------------  </div>
     <div> watch 只监听一次 </div>
     <div>
              <p> 第一种 我们可以设置一个状态 true 或者false 监听一次后改变状态 </p>
              <p>第二种 搞个计数器   </p>
              <p>第三种const unwatch = this.$watch('isReady', function(newValue, oldValue){
                    console.log(newValue);
                    unwatch()
                    });  
               </p>
      </div>
      <div> ---------------------------  </div>
      <div> 
              <p> vue中使用 mixins （混入）的使用  </p>
              <p> 混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。
                 一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。 </p>
              <p> 主要作用是继承和封装，将一些公共的代码抽离，可以减少代码量，提高复用性。 </p>
              <p> vue提供的一种混合机制，能够更好的实现组件功能复用，混合对象（mixins）
                可以包含任意组件选项（data、created、mounted、methods、filters等），
                组件引入后相关选项会进行合并，相当于引入后，父组件各属性进行扩充；
                 </p>
      </div>
      <div> mixin是平常开发中常见的一种代码复用手段，它的作用类似于 react中的高阶组件，mixin具体实现是通过采用策略模式来将数据进行合并：
          data、provide：后者的值将对前者的值进行扩展，相同属性名（非对象）则以后者的属性值为准，如果两者的值是对象，但值不相等，则继续进行合并，
          生命周期钩子函数：将后者的生命周期钩子函数拼接到前者的生命周期钩子函数，调用时依次执行；
          components、filters、directives：对前者的属性进行拷贝扩展，属性相同则后者覆盖前者；
          watch：与生命周期钩子函数类似，将后者的 watch拼接到前者的 watch后面；
          props、methods、inject、computed：定义一个对象 ret，遍历前者的属性或方法，对 ret进行扩展，再遍历后者的属性或方法，后者将覆盖前者的属性或方法；
          默认策略：策略中没有定义的策略，后者有则返回后者，否则返回前者；

     </div>
      <div> ---------------------------  </div>
      <div> 
             <p>vue3 用的mitt  emit()触发某个方法 on监听某个方法  off 移除某个方法 </p>
             <p>vue2关于EventBus使用  </p>
             <p>1> 建议事件监听放在组件 挂载 时去监听，如果放在组件生命周期 created 中监听会导致切换组件时不生效。  </p>
             <p> 2> 监听事件也需要在组件生命周期 结束 时解绑该监听事件  beforeDestroyed() {
                  this.$EventBus.$off('eventName');
                }
              </p>
             <p>1> 触发 EventBus 事件需要其它组件监听该事件
                </p>
             <p>
               2> 建议事件名唯一，避免组件切换、路由切换时不同生命周期导致重复监听 </p>
     </div>
    <div> ---------------------------  </div>
    <div> vuex中modules可以将项目state进行分块，互补干扰。那么在单个module中，action如何调用其他module中action或者根action/mutation/state？  </div>
     <div> 
             <p> commit 用于调用mutation，当前模块和其他模块；  </p>
             <p>  dispatch 用于调用action，当前模块和其他模块 </p>
             <p> 
                 getters 用于获取当前模块getter
             </p>
             <p> 
                 state 用于获取当前模块state；
             </p>
             <p>
                 rootState 用于获取其它模块state；
             </p>
             <p>
                 rootGetters 用于获取其他模块getter
             </p>

     </div>
    <div> ---------------------------  </div>
     <div> js小数运算出现的问题(精度丢失)及解决办法  </div>
     <div> 
             <p> 1.保留小数位数toFixed()  </p>
             <p> 可以通过先乘10的倍数，然后再除
                 比如 我要保留两位小数 那我就乘100，运算完后再除100
                  </p>
             <p> 
                vue中使用mathjs
             </p>
     </div>
     <div> ---------------------------  </div>
      <div> 
             <p> 定位方式  </p>
             <p> 1、static（静态定位，默认设置）
                  解析：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
             </p>
             <p> 
                2.relative（相对定位，图层不可嵌套）
               使用相对定位Relative进行定位时，原本该元素占据的空间位置不变，以“原本该元素”的左上位置为中心点，根据设置的left和top进行位置的偏移。
              设置为相对定位的元素框会偏移某个距离，元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
             </p>
              <p> 
                3、absolute（绝对定位，与位置属性配合使用）
                 使用绝对定位Absolute进行定位时，该元素脱离文档流，以“父级元素”的左上位置为中心点，根据设置的left和top进行位置的偏移。
              </p>
                <p> 
               4、fixed（图层固定，不滚动）
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。生成绝对定位的元素，相对于浏览器窗口进行定位。其它特性同Absolute绝对定位
              </p>

     </div>
     <div class="relative_class">   </div>
     <div> ---------------------------  </div>
      <div> display属性的值有：1、none，可隐藏元素；2、block，可将元素设置为块级元素；3、inline，可将元素设置为内联元素；4、inline-block，可将元素设置为行内块元素；5、table，可将元素设置为块元素级的表格；
        6、table-cell，可将元素设置为表格的单元格；7、table-row，可将元素设置为表格的行；8、flex，可将对象设置为弹性伸缩盒。 
     </div>
      <div> ---------------------------  </div>
     <div> 
            转换为块元素：display:block;
            转换为行内元素：display:inline;
            转换为行内块元素：display:inline-block;
      </div>
      <div> ---------------------------  </div>
     <div> 
            router：路由对象;
            routers：路由配置项;
            route：当前路由信息;
      </div>
     <div> ---------------------------  </div>
     <div> 
            SPA单页面应用的优缺点
            优缺点
            <p> 优点  </p>
            <p> 1.用户交互及体验比较流畅 </p>
            <p> 2.提取组件开发便于后期维护 </p>
            <p> 3.减轻服务器压力 </p>

            <p> 缺点  </p>
            <p> 1.不利于SEO </p>
            <p> 2.第一次进入有点慢(现在有了按需加载策略) </p>
            
      </div>
      <div> ---------------------------  </div>
      <div> 回调地狱是promise解决的    async await是promise的语法糖  </div>
      <div> async await是顺序执行(串行)  promise可以并行  </div>
      <div> ---------------------------  </div>
      <div> 虚拟DOM是如何提升vue渲染效率  将直接操作DOM变成直接变成对比2个js对象的比较  </div>
      <div> ---------------------------  </div>
      <div> 全局变量不会被垃圾回收机制回收  </div>
      <div> ---------------------------  </div>
      <div> computed 不能监听缓存的和时间戳的  </div>
      <div> {{textDemoFn}} </div>
      <el-button @click="clickChangeFm">点击改变 </el-button>
      <div> <div> ---------------------------  </div>
      Vue.set(obj, key, val)，为响应式对象 obj 增加一个新的 key，则通过 defineReactive 方法设置响应式，并触发依赖更新  </div>
      
       <el-button @click="clickCGetFm">点击改变 </el-button>

  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
         //input: ''
         options:'aaaa',
         textDemo:"",
    };
  },
  computed: {
    input:{
        get: function () {
          //  return this.options
          //  return 1111111
        },
        set: function (newValue) {
          // return newValue
        }
    },
    textDemoFn:{
         get: function () {
          return  window.localStorage.getItem('demoDemo')
        },
    },
   

  },

  created(){
     //this.textDemo=window.localStorage.getItem('demoDemo')
     let aaaa=document.getElementById('Maincontainer')
      console.log('aaaaaaaaaaaaaa')
     console.log(aaaa)
       console.log('aaaaaaaaaaaaaa')
  },
  methods: {
    clickCGetFm(){
       let aaaa=document.getElementById('Maincontainer')
      console.log('bbbbbbbbbbbbbbbb')
     console.log(aaaa)
     console.log(aaaa.clientHeight)
       console.log(aaaa.currentStyle.height)
       console.log('bbbbbbbbbbbbbbbbb')
    },
     setObjArr() {
        // this.options = 222222
         this.input = 222222
     },
     clickChangeFm(){
      window.localStorage.setItem('demoDemo','9999999999999999')
      //

    }
      
  }
};
</script>


<style lang="scss" scoped>
.wscn-http404-container {
  padding: 30px;
}
.relative_class{
  width: 200px;
  height: 200px;
  background: red;
  position: relative;
  left: 0px;
  top:0px;

}
</style>
